<template>
	<view class="recommend-shop-wrap">
		<loading-vue :loading="loading" text="正在加载..." />
		<u-transition :show="!loading">
			<view class="recommend-xl-wrap-inner" v-if="!isEmpty">
				<view class="xl-item" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
					<image :src="item.image" class="xl-image" mode="aspectFill"></image>
					<view class="xl-footer">
						<view class="xl-name">
							<text>{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="empty-wrapper" v-else>
				<u-empty text="暂无酒店数据" :icon="sourceUrl+'/data-empty.png'" />
			</view>
			<view class="loadmore-wrapper">
				<u-loadmore icon-color="#3c9cff" :status="status" loading-icon="semicircle" />
			</view>
		</u-transition>
	</view>
</template>

<script>
	import LoadingVue from './loading.vue'
	import { LOAD_MORE } from '@/constant/index.js'
	export default {
		components: { LoadingVue },
		props: ['cityId', 'areaId'],
		created() {
			this.initData()
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages-bundle/shop-detail/shop-detail?id=' + id
				})
			},
			async initData(clear = false) {
				if (clear) {
					this.status = LOAD_MORE.LOADING
					this.page = 1
					this.list = []
					this.isEmpty = false
				}
				if (this.status === LOAD_MORE.NO_MORE) return
				this.status = LOAD_MORE.LOADING
				const { page, pageSize, cityId, areaId } = this
				const resp = await this.$request({
					url: "/Hotel/getHotelList",
					data: { page, list_rows: pageSize, city_id: cityId, area: areaId },
				})
				console.log('initShopData', resp);
				await this.$delay(300)
				this.loading = false
				const { code, data, msg } = resp
				if (code !== 1) {
					this.status = LOAD_MORE.NO_MORE
					this.isEmpty = true
					return this.$toast({ title: msg })
				}
				const { current_page, per_page, total, data: list } = data
				if (!!list && list.length) {
					this.list.push(...list.map(item => {
						const { id, cover_imag: image, hotel_name: name } = item
						return {
							id,
							image,
							name,
						}
					}))
				}
				this.isEmpty = this.list.length === 0
				const hasMore = current_page * per_page < total
				if (hasMore) {
					this.page += 1
					return this.status = LOAD_MORE.LOAD_MORE
				}
				this.status = LOAD_MORE.NO_MORE
			},
		},
		computed: {},
		data() {
			return {
				page: 1,
				pageSize: 15,
				list: [],
				isEmpty: false,
				status: LOAD_MORE.LOAD_MORE,
				loading: true,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommend-shop-wrap {
		.recommend-xl-wrap-inner {
			padding: 32rpx 28rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #ffffff;
			border-radius: 16rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 32rpx 30rpx;
		}

		.xl-item {
			width: 100%;
			height: 400rpx;
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;

			.xl-footer {
				height: 72rpx;
				background: rgba(0, 0, 0, 0.7);
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				width: 100%;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;

				.xl-name {
					height: 40rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}

			.xl-image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>